<template>
    <div class="page login-view">
        <wv-header title="短信重置密码" fixed>
            <div class="btn-menu" slot="right">
                <span class="register-btn" @click="$router.push({name: 'login'})">登录</span>
            </div>
        </wv-header>
        <div class="main-header-fixed">
            <div class="login-wrapper">
                <wv-group >
                    <wv-input type="number" label="手机号" placeholder="请输入手机号码" v-model="fields.mobile" required></wv-input>
                    <wv-input type="password" label="密码" placeholder="请输入新密码" v-model="fields.password" required></wv-input>
                    <wv-input type="password" label="确认密码" placeholder="请再次输入新密码" v-model="fields.re_password" required></wv-input>
                    <wv-input type="number" label="" placeholder="请输入验证码" v-model="fields.auth_code">
                        <button ref="authCodeBtn" :disabled="authCodeBtnDisabled" class="weui-vcode-btn" slot="ft" @click="getAuthCode">{{ authCodeText }}</button>
                    </wv-input>
                </wv-group>
                <wv-button type="primary" @click="findPassword">确认重置</wv-button>
            </div>
        </div>
    </div>
</template>

<script>
    import util from '@/libs/util';
    import storage from '@/libs/storage';
    import config from '@/config/';
    export default {
        data () {
            return {
                fields: {
                    mobile: '',
                    password: '',
                    re_password: '',
                    auth_code: '',
                },

                authCodeBtnDisabled: false,
                authCodeText: '获取验证码',
            }
        },

        methods: {
            findPassword () {
                util.ajax.post('/api/user/password/reset/mobile', this.fields).then((resp) => {
                    if (resp.data.status == false) {
                        this.$root.topTips(resp.data.message);
                    } else {
                        this.$root.toast(resp.data.message);

                        // 进入登录页面
                        this.$router.push({
                            name: 'login'
                        });
                    }
                }).catch((e) => {
                    util.handleApiException(e, this, '重置密码失败');
                });
            },

            getAuthCode () {
                if (/^1\d{10}$/.test(this.fields.mobile)) {
                    this.authCodeBtnDisabled = true;
                    util.ajax.post('/api/user/password/reset/mobile/authcode', {mobile: this.fields.mobile}).then((resp) => {
                        if (resp.data.status == true) {
                            this.$root.success(resp.data.message);
                            this.authCodeTimer();
                        } else {
                            this.$root.error(resp.data.message);
                            this.authCodeBtnDisabled = false;
                        }
                    }).catch((e) => {
                        util.handleApiException(e, this, '获取验证码失败');
                        this.authCodeBtnDisabled = false;
                    })
                } else {
                    this.$root.error('请输入正确的手机号码');
                }
            },

            authCodeTimer() {
                let that = this;
                that.authCodeBtnDisabled = true;
                let time = 60;
                window._authCodeTimer = setInterval(function () {
                    if (time == 1) {
                        clearInterval(window._authCodeTimer);
                        that.authCodeBtnDisabled = false;
                        that.authCodeText = '获取验证码';
                    } else {
                        time--;
                        that.authCodeText = time + '后重新获取';
                    }
                }, 1000);
            },
        }
    }
</script>

<style scoped lang="scss">

</style>